<template>
  <div class="search-page-container">
    <div class="container">
      <div>为您发现了以下关于<span style="font-size: 20px; margin: 0 5px;color: green">{{$store.state.input}}</span>的商品</div>
      <div class="search-page">
        <el-card v-for="item,i in this.searchList" :key="i" class="box-card">
          <div slot="header">
            <span>商品名称：{{item.name}}</span>
          </div>
          <div class="item-content">
            <el-image
              style="width: 200px; height: 200px"
              :src="item.img"
              :preview-src-list="srcList">
            </el-image>
            <div class="item-content-content">
              <p>商品描述：{{item.content}}</p>
              <p>商品价格：￥{{item.price}}</p>
              <p style="color: green">发布人：{{item.user.username}}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {getSearchList} from '@/api/search/index.js'
export default {
  data() {
    return{
      searchList: [],
      srcList:[]
    }
  },
  methods: {
    init() {
      let input = this.$store.state.input
      // console.log(input);
      // console.log(this.$route.path);
      getSearchList(input).then(res => {
        // console.log(res);
        this.searchList = res.data.data
      })
    }
  },
  computed:{
    
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.search-page{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.box-card{
  width: 290px;
  margin: 10px auto;
}
</style>